﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="UserAppraise.aspx.cs" Inherits="MyHospital.web.UserAppraise" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="Styles/appraise.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style type="text/css">
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="main">
            <section>
                <!--存放评价医生的照片-->
                <div class="left">
                     <img class="img" id="Image2" runat="server" src="Prod_Images/null.png" 
                         style="height:130px;width:100px;"/>
                </div>
                <!--存放评价医生的简介-->
                <div class="center">
                    <p>
                        <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                    </p>
                </div>
                <!--存放评价医生的姓名、科室、评价-->
                <div class="right">
                    <div>
                        <div class="name"><em>医生: </em>
                            <asp:Label ID="Label2" runat="server" Text=""> </asp:Label>   
                       </div>
                        <div class="department"><em>科室：</em>
                            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                        </div>
                        <div class="grade"><em>服务质量；</em>
                        <!--存放五星好评-->
                        </div>
                            <div class="rating" id="rating">
                                <div id="rating-item1" class="rating-item iconfont" title="很不好"  >
                                    &#xe799;</div>
                                <div id="rating-item2" class="rating-item iconfont" title="不好">&#xe799;</div>
                                <div id="rating-item3" class="rating-item iconfont" title="一般">&#xe799;</div>
                                <div id="rating-item4" class="rating-item iconfont" title="好">&#xe799;</div>
                                <div id="rating-item5" class="rating-item iconfont" title="很好">&#xe799;</div>
                            </div>
                        <input id="Hidden" type="hidden" title="" />
                    </div>
                    <!--存放对医生的评价-->
                    <div class="content">
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                        <label for="">说点什么吧</label><br />
                        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                        <asp:Panel ID="Panel1" runat="server">
                           <asp:TextBox ID="contentbox" runat="server" TextMode="MultiLine"></asp:TextBox>
                           <asp:Button ID="submit" runat="server" Text="发送" OnClick="btn_click" style="height: 22px" />
                        </asp:Panel> 
                        <br/><asp:Label ID="Label5" runat="server" Text=""></asp:Label>   
                             </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </section>
    </div>
    <script>
        var img = document.querySelector('.img').src;
        var items = document.querySelectorAll('.rating-item');
        var inp = document.querySelector("#Hidden");
        for (var i = 0; i < items.length; i++) {
            items[i].setAttribute('index', i);
        }
        if (img == "https://localhost:44346/Prod_Images/null.png") {
            num = 0;
        } else {
            num = 4;//点亮个数
        }
            $item = $('#rating').find('.rating-item');//获取的所有li
            //点亮星星函数
    var dianLiang = function (num) {
                $item.each(function (index) { //遍历所有li,即所有星星
                    if (index < num) {
                        $(this).css('background-color', 'yellow') //点亮
                    } else {
                        $(this).css('background-color', '') //未点亮
                    }
                })
            }
    //    初始化,默认点亮2颗
    dianLiang(num)
    //    绑定事件
    $item.on('mouseover', function () {
                dianLiang($(this).index() + 1)
            }).on('click', function () {
                dianLiang($(this).index() + 1);
                num = $(this).index() + 1;
                var grade = $(this).index
            })
       
    $('#rating').on('mouseout', function () {
                dianLiang(num)
    })
        
    
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
